<template>
    <!-- 
ref:
data
selection-change：每一项操作会触发
     -->
    <div>
        <el-table ref="multipleTableRef" :data="playLists" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <!-- 数据需要我自己处理一下 -->
            <el-table-column label="直播信息" width="300">
               <!--scope.row=>每一项=》{}{{ scope.row.date }}  -->
             <template #default="scope">
               <div class="w-flex2">
                <img class="tableImage" :src="scope.row.img" alt="">
               <div >{{scope.row.name  }}</div>
               </div>
            </template>
         </el-table-column>
         <el-table-column property="Pstatus" label="直播状态" width="180" />
         <el-table-column property="nums" label="预约人数" width="120" />
       
         <el-table-column label="商品状态" width="220">
               <!--scope.row=>每一项=》{}{{ scope.row.date }}  -->
             <template #default="scope">
               <div class="itemColor">{{scope.row.Shstatus }}</div>
              
            </template>
         </el-table-column>
         <el-table-column property="time" label="开始时间" width="120" />
         <el-table-column type="index" label="序号" width="120" />
         <el-table-column label="操作" width="220">
               <!--scope.row=>每一项=》{}{{ scope.row.date }}  -->
             <template #default="scope">
               <div class="w-flex3">
                  <div class="itemColor">数据</div>
                  <div class="itemColor">编辑</div>
                  <div class="itemColor">下架</div>
                  <div class="itemColor">删除</div>
               </div>
            </template>
         </el-table-column>
            <!--  -->
            <!-- <el-table-column label="Date" width="120">
             
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="Name" width="120" />
            <el-table-column property="address" label="Address" show-overflow-tooltip /> -->
        </el-table>
        <!-- <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >Toggle selection status of second and third rows</el-button
    >
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div> -->
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElTable } from 'element-plus'

//自己写的
  defineProps({
    playLists:{ // 后台给的数据 =》[{}]
        type:Array
    }
  })




//

interface User {
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
    console.log(11111111);  // 批量操作
    
//   multipleSelection.value = val
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped lang="scss">
   .tableImage{
      width:150px;
      margin-right:15px;
     
   }
   .itemColor{
    color:blue;
   }
</style>